<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
	<head>
	  {% if debug %}
		<script type="text/javascript" src="{{ MEDIA_URL }}js/jquery-1.4.2.js"></script>
		<script type="text/javascript" src="{{ MEDIA_URL }}js/jquery-ui.js"></script>
		<script type="text/javascript" src="{{ MEDIA_URL }}js/protovis-d3.2.js"></script>
	  {% else %}
		<script type="text/javascript" src="{{ MEDIA_URL }}js/jquery-1.4.2.min.js"></script>
		<script type="text/javascript" src="{{ MEDIA_URL }}js/jquery-ui.min.js"></script>
		<script type="text/javascript" src="{{ MEDIA_URL }}js/protovis-r3.2.js"></script>
	  {% endif %}
		<script type="text/javascript" src="{{ MEDIA_URL }}js/xbreadcrumbs.js"></script>
		<script type="text/javascript" src="{{ MEDIA_URL }}js/quickselect.js"></script>
		<script type="text/javascript" src="{{ MEDIA_URL }}js/quicksilver.js"></script>
		<script type="text/javascript" src="{{ MEDIA_URL }}js/math_util.js"></script>
		<script type="text/javascript" src="{{ MEDIA_URL }}js/jquery.tipsy.js"></script>
		<script type="text/javascript" src="{{ MEDIA_URL }}js/behavior.tipsy-boxplot.js"></script>
		<script type="text/javascript" src="{{ MEDIA_URL }}js/boxplot.js"></script>

		<link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}style/quickselect.css">
		<link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}style/xbreadcrumbs.css">
		<link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}style/style.css">
		<link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}style/tipsy.css">

		<title>Project Betastasis</title>
		<script type="text/javascript">
		  $(document).ready(function() { $('#breadcrumbs').xBreadcrumbs(); });
		</script>
	</head>
	<body>
	  <div id="header">
	    <h1 id="logo"><a href="../">Project Betastasis</a></h1>
	  </div>
	  
	  <ul class="xbreadcrumbs" id="breadcrumbs">
	    <li><a href="/">Home</a></li>
	    {% include 'cancer_type_nav.html' %}
	    {% include 'data_set_nav.html' %}	  
	    <li><a href="#">Expression box plot</a>
	      <ul>
		{% include 'platform_vis_nav.html' %}
	      </ul>
	    </li>
	  </ul>
	  
	  <div id="main">
	    <h2>{{current_data_set.meta.name}}</h2>
	    <h3>Gene expression</h3>
	    <div id="fig"></div>
	  </div>
	  
	  <div id="side">
	    <p><b>Visualization</b><br>
	      Platform: {{current_platform.name}}<br><br>
	      Gene: <input type="text" id="GeneSelect" value="{{default_gene}}" /><br/><br/>
	      <button id="box_only_btn">Boxplot</button><br/>
	      <button id="box_dots_btn">Boxplot + Dots</button><br/>
	      <button id="dots_only_btn">Dots</button>
	    </p>
	  </div>
	  
	  <div id="footer"></div>
	</body>
	<script type="text/javascript">

  var genelist;

  var genelist_downloaded = function(d)
  {
     genelist = d['genes'];
     $('#GeneSelect').quickselect({
	maxVisibleItems: 10, minChars: 1, matchMethod: 'quicksilver',
	autoSelectFirst: false, selectSingleMatch: false,
	data: genelist});
  };

  var data_root = "/{{current_data_set.id}}/{{current_platform.id}}";

  $(document).ready(function() {
     var vis = new ExprBoxplot('fig', {show_dots: true} );

     var current_gene = "{{default_gene}}";

     var create_plot_json = function(d)
     {
	 var plot_json = {};
	 plot_json.data_type = "gene_expression";

	 var contents = {};
	 contents.gene_name = current_gene;

	 contents.expr_data = [];
	 var cnt = 0;
	 for (var s in d) {
	     var expr = d[s].slice(0);
	     var quart = bmath.quartiles(expr);

	     contents.expr_data[cnt] = {
		 subtype: s,
		 min: pv.min(expr),
		 max: pv.max(expr),
		 median: quart.median,
		 lq: quart.lq,
		 uq: quart.uq,
		 expr_values: expr
	     };

	     cnt = cnt + 1;
	 }

	 plot_json.contents = contents;
	 return plot_json;
     };

     var format_and_plot = function(d)
     {
	var plot_data = create_plot_json(d);
	vis.set_data(plot_data);
     };

      $('#GeneSelect').change(function()
      {
	  gs = $(this);
	  // For some reason the $(this).val() hasn't yet updated when we get
	  // to this function if the user selects a gene with the mouse. So we use
	  // a tiny timeout here.
	  setTimeout(function() {
	      current_gene = gs.val();
	      if (genelist.indexOf(current_gene) == -1) {
		  gs.css('background-color', '#f66');
		  return;
	      }

	      gs.css('background-color', 'white');
	      load_gene_data(current_gene);
	  }, 10);
      });

      $(function()
      {
	      $("#box_only_btn").button().click(function() {
		 vis.set_box_visibility(true);
		 vis.set_dots_visibility(false);
	      });
	      $("#box_dots_btn").button().click(function() {
		 vis.set_box_visibility(true);
		 vis.set_dots_visibility(true);
	      });
	      $("#dots_only_btn").button().click(function() {
		 vis.set_box_visibility(false);
		 vis.set_dots_visibility(true);
	      });
      });

     var load_gene_data = function(gene_name)
     {
	 subtype_expr = [];
	 var gene_path = data_root + '/' + gene_name.toUpperCase() + '/expr_json/';

	 $.getJSON(gene_path, function(d) {
	     format_and_plot(d);
	 });
     };

      load_gene_data( current_gene );
      var gene_list_path = data_root + '/gene_list_json/';
      $.getJSON(gene_list_path, genelist_downloaded);
  });
	</script>
</html>
